<template>
  <div>
    <h1>shallowReadonly-readonly</h1>
    <h3>数量一：{{ num1 }}</h3>
    <h3>数量二：{{ num2 }}</h3>
    <h3>车一：{{ car1 }}</h3>
    <h3>车二：{{ car2 }}</h3>
    <button @click="change1">修改数量一</button>
    <button @click="change2">修改数量二</button>
    <button @click="change3">修改车一</button>
    <button @click="change4">修改车二</button>
  </div>
</template>

<script setup lang='ts' name="shallowReadonly">
import { ref, reactive, shallowReadonly } from 'vue'

let num1 = ref(10)
let num2 = shallowReadonly(num1)

let car1 = reactive({
    brand:'BMW',
    options:{
        price:300000,
        color:'白色'
    }
})

let car2 = shallowReadonly(car1)

function change1(){
    num1.value += 20
}
function change2(){
    // num2.value -= 5
}
function change3(){
    car1.brand = '奔驰'
    car1.options.color = '黑'
}
function change4(){
    // car2.brand = '奥迪'
    // car2.options.color = '粉'
    // Object.assign(car2,{brand:'奥迪',option:{price:3,
    //     color:'绿色'}})
}
</script>


<style lang='scss' scoped>

</style>